<template>
  <div class="home">
    <div class="title">
      蘑菇生产生命周期步骤
    </div>
    <a-steps :current="current">
      <a-step v-for="item in steps" :key="item.title" :title="item.title" />
    </a-steps>
    <div class="steps-content">
      <div v-if="current === 0">
        <ZhiDai></ZhiDai>
      </div>
      <div v-if="current === 1">
        nuzhouh222
      </div>
      <div v-if="current === 2">
        nuzh333
      </div>
      <div v-if="current === 3">
        nuzho444
      </div>
    </div>
    <div class="steps-action">
      <a-button v-if="current < steps.length - 1" type="primary" @click="next">
        Next
      </a-button>
      <a-button
        v-if="current == steps.length - 1"
        type="primary"
        @click="$message.success('Processing complete!')"
      >
        Done
      </a-button>
      <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
        Previous
      </a-button>
    </div>
  </div>
</template>
<script>
import ZhiDai from "../components/zhidai/yushi.vue";
export default {
  data() {
    return {
      current: 0,
      steps: [
        {
          title: "制袋-步骤一：预湿",
          content: "First-content",
        },
        {
          title: "Second",
          content: "Second-content",
        },
        {
          title: "Last",
          content: "Last-content",
        },
      ],
    };
  },
  methods: {
    next() {
      this.current++;
    },
    prev() {
      this.current--;
    },
  },
  components: {
    ZhiDai,
  },
};
</script>
<style scoped lang="less">
.home {
  max-width: 1000px;
  margin: 50px auto;
  .title {
    text-align: center;
    font-size: 20px;
    line-height: 30px;
    height: 30px;
    margin-bottom: 50px;
  }
  .steps-content {
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    background-color: #fafafa;
    min-height: 200px;
    text-align: center;
    padding-top: 80px;
  }

  .steps-action {
    margin-top: 24px;
  }
}
</style>
